<template>
    <view style="height: 450rpx;width: 100%;">
        <!-- 确认需要 -->
        <view
            style="z-index: 9999999999;background-color: #FFFFFF;position: fixed;margin-bottom: 20rpx;padding: 20rpx 20rpx;width: 100%;height: 64rpx;display: flex;justify-content: space-between;align-items: center;">
            <view style="color: black;font-size: 30rpx;">选择区</view>
            <u-icon name="close" color="black" size="34" @click="sendBtn('cancel')"></u-icon>
        </view>
        <!-- 列表 -->
        <scroll-view scroll-y="true" style="height: 330rpx;" scroll-with-animation="true">
            <view style="margin-top: 30px;">
                <view v-for="(item, index) in typeList" :key="index" :class="{ 'add-border': activeName === index }"
                :style="{ 'border-bottom': activeName === index ? '1px solid rgb(213, 213, 214, 0.6)' : '', 'border-top': activeName === index ? '1px solid rgb(213, 213, 214, 0.6)' : '', 'width': '100%', 'height': '64rpx', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center' }">
                <view
                    :style="{ 'font-weight': 540, 'color': activeName !== index ? 'rgb(96, 98, 102,0.6)' : 'black', 'z-index': '99999', 'fontSize': '32rpx' }"
                    @click="handleActiveName(item, index)">{{
                item.typeName }}</view>
            </view>
            </view>
            <view v-if="typeList.length===0" style="text-align: center;line-height: 300rpx;">暂无数据</view>
        </scroll-view>
        <view style="z-index: 9999999999;position: fixed;bottom: 0rpx;width: 100%;height:100rpx;">
            <button @click="sendBtn('confirm')"
                style="width: 500rpx;border-radius: 48rpx;color: #fff;background: #ca171d;height:70rpx;text-align: center;line-height: 70rpx;outline: none;">确认</button>
        </view>
    </view>
</template>

<script>
export default {
    name: "SelectInfo",
    props: {
        typeList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            activeName: 0,
            typeObj: {},
        }
    },
    methods: {
        sendBtn(type) {
            const datas = this.typeObj?.typeName ? this.typeObj : this.typeList[0]
            const items = type === 'confirm' ? datas : {}
            this.$emit('closeSelect', [items, false])
        },
        handleActiveName(item, type) {
            this.activeName = type
            this.typeObj = item
        }
    },
}

</script>
<style lang="scss" scoped></style>